<template>
  <div class="zuo">
    <div style="width: 400px;margin-top: 50px">
      <van-nav-bar  title="个人统计" @click-left="goBack()" left-text="" left-arrow />
      <h2>司机每日接单数</h2>
      <div id="bar" style="width: 100%;height: 400px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";
export default {
  data() {
    return {
      // data: [],
      driverInfo: {}
    };
  },
  mounted() {
    this.initBar();
    this.initEcharts();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async findDriverByTel() {
      const tel = JSON.parse(localStorage.getItem('login'));
      const response = await axios.post('personal/personal/findByTel?tel=' + tel);
      this.driverInfo = response.data;
      console.log(this.driverInfo);
      return this.driverInfo;
    },
    async initEcharts() {
      try {
        const response = await axios.get('/personal/personal/findBar?did=' + this.driverInfo.id);
        if (response.status === 200) {  // 根据实际情况调整为合适的HTTP状态码判断
          let map = response.data.data;
          console.log(map);
          console.log(map.xAxis)
          console.log(map.yAxis)
          console.log("xAxis", map.xAxis);
          console.log("yAxis", map.yAxis);
          let xAxisData = map.xAxis.map(dateStr => {
            let date = new Date(dateStr);
            return date.getDate();
          });
          // const xAxisData = data.xAxis.map(dateStr => new Date(dateStr));

          this.initBar(xAxisData, map.yAxis);
        } else {
          console.error('请求后端数据失败，状态码：', response.status);
        }
      } catch (error) {
        console.error('请求后端数据出现错误：', error);
      }
    },
    initBar(xAxis, yAxis) {
      console.log('传入initBar的xAxis数据：', xAxis);
      console.log('传入initBar的yAxis数据：', yAxis);
      // 后续配置图表代码...
      let chartDom = document.getElementById('bar');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单数',
            type: 'bar',
            barWidth: '60%',
            data: yAxis
          }
        ]
      };
      option && myChart.setOption(option);
    }
  },
  async created() {
    await this.findDriverByTel();
    await this.initEcharts();
  }
};
</script>

<style scoped>
.zuo {
  text-align: left;
}
</style>
